
<template>
  <span class="ecp-dialog-btn">
    <el-button :disabled="disabled" type="text" @click="initForm">转移分类</el-button>
    <el-dialog
      title="转移分类"
      :visible.sync="visabled"
      width="320px"
      top="212px"
      center>
      <el-form :model="dialogForm" ref="dialogForm" label-width="0" class="demo-ruleForm">
        <el-form-item>
          <el-input readonly type="text" :value="`${dialogForm.name} 转移至`" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item
          :prop="formLevel == 2?'toCategoryId':'toCategoryIds'"
          :rules="[
            { required: true, message: '请选择分类'}
          ]"
        >
          <el-cascader
            v-if="formLevel == 3"
            v-model="dialogForm.toCategoryIds"
            style="width:100%;"
            placeholder="选择分类"
            :options="dropDownOption"
            filterable
          ></el-cascader>
          <el-select v-if="formLevel == 2" style="width:100%;" v-model="dialogForm.toCategoryId" filterable placeholder="请选择分类">
            <el-option
              v-for="item in dropDownOption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitForm" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </span>
</template>

<script>
import { movePurchaseCategory, getPurchaseCategory} from "~/api/";
  export default {
    props: {
      disabled: {
        type: Boolean,
        default: false
      },
      formId: {
        require: true
      },
      dropDownOption: {
        require: true
      },
      formLevel: {
        require: true
      }
    },
    data() {
      return {
        visabled: false,
        dialogForm: {
          name: '',
          toCategoryId: '',
          toCategoryIds: []
        }
      }
    },
    methods: {
      async initForm () {
        const res = await getPurchaseCategory(this, this.formId)
        if (res.code == '0') {
          this.visabled = true
          this.dialogForm.name = res.data.categoryInfo.name
        } else {
          this.$msgbox({
            title: '提示',
            message: res.message,
            type: 'error'
          })
        }
      },
      submitForm () {
        this.$refs['dialogForm'].validate( async (valid) => {
          if (!valid) return
          const toCategoryId = this.formLevel == 2 ? this.dialogForm.toCategoryId : this.dialogForm.toCategoryIds[1]
          const res = await movePurchaseCategory(this, this.formId, toCategoryId)
          // 成功处理
          if (res.code == '0') {
            this.$message.success('转移成功')
            this.$emit('on-success', toCategoryId)
            this.visabled = false
            return
          }
          // 失败处理
          this.$msgbox({
            title: '提示',
            message: res.message,
            type: 'error'
          })
        })
      },
      resetForm() {
        this.$refs['dialogForm'].resetFields()
        this.visabled = false
      }
    }
  }
</script>

<style lang="scss" scoped>
.ecp-dialog-btn {
  & /deep/ {
    .el-dialog--center .el-dialog__body {
      padding: 15px;
    }
    .el-button{
      font-weight: normal ;
    }
  }
}
</style>
